<template lang="html">
<div class="wrapper">
  <transition name="fade" mode="out-in">
    <router-view />
  </transition>
  <div class="tabbar bottom">
    <router-link class="tabbar-item" to="/home">
      <div class="tabbar-icon">
        <i class="icon icon-home"></i>
        <i class="fill icon icon-homefill"></i>
      </div>
      <p class="tabbar-label">首页</p>
    </router-link>
    <router-link class="tabbar-item" to="/online">
      <div class="tabbar-icon">
        <i class="icon icon-we"></i>
        <i class="fill icon icon-wefill"></i>
      </div>
      <p class="tabbar-label">发现</p>
    </router-link>

    <router-link class="tabbar-item" to="/my">
      <div class="tabbar-icon">
        <i class="icon icon-my"></i>
        <i class="fill icon icon-myfill"></i>
      </div>
      <p class="tabbar-label">我的</p>
    </router-link>
  </div>
</div>
</template>

<script>
export default {
}
</script>

<style lang="stylus">
@import "assets/stylus/base"
.tabbar
  height: $tabbar-hight
  display: flex
  align-items: center
  background-color: $tabbar-bg
  // box-shadow: 0 -2px 8px rgba(black, 0.1)
  fine-border(top,#ddd)
  z-index: 99
  &.bottom
    position: fixed
    left: 0
    right: 0
    bottom: 0
  .tabbar-item
    $icon-size = 24px
    flex: 1
    color: $text-dark
    text-align: center
    .tabbar-icon
      display: block
      width: 30px
      height: $icon-size
      line-height: $icon-size
      font-size: $icon-size
      margin: 0 auto
      .icon
        line-height: 1
        color: inherit
        font-size: inherit
        &.fill
          display: none
    .tabbar-label
      font-size: 12px
      color: inherit
      line-height: 1.5
    &.router-link-active
      color: $primary !important
      .tabbar-icon
        .icon
          display: none
          &.fill
            display: block !important
</style>
